<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Merchant</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /* 自定义样式 */
        .container {
            max-width: 400px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="商户手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入商户手机号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="makeMerchant">确定发送</el-button>
        </el-form-item>
    </el-form>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                formData: {
                    phone: ''
                }
            };
        },
        methods: {
            makeMerchant() {
                // 发送请求
                axios.post('/user/makeMerchant', {
                    phone: this.formData.phone
                }).then(response => {
                    // 请求成功处理
                    console.log(response.data);
                    // 提示用户操作成功
                    this.$message({
                        message: '商户添加成功',
                        type: 'success'
                    });
                    // 清空输入框
                    this.formData.phone = '';
                }).catch(error => {
                    // 请求失败处理
                    console.error(error);
                    // 提示用户操作失败
                    this.$message.error('商户添加失败');
                });
            }
        }
    });
</script>
</body>
</html>
